<template>
  <JModal
    :title="title"
    :width="600"
    :visible="visible"
    :confirmLoading="confirmLoading"
    @ok="handleOk"
    @cancel="handleCancel"
    cancelText="取消"
    okText="创建项目"
  >
    <div class="project-create-content">
      <a-form :model="projectForm" layout="vertical">
        <a-form-item label="项目名称" required>
          <a-input v-model:value="projectForm.projectName" placeholder="请输入项目名称" :maxlength="100" show-count />
        </a-form-item>

        <a-form-item label="项目描述">
          <a-textarea v-model:value="projectForm.projectDesc" placeholder="请输入项目描述（可选）" :rows="4" :maxlength="500" show-count />
        </a-form-item>

        <a-form-item label="合同信息" v-if="contractInfo.contractTheme">
          <div class="contract-info-display">
            <a-descriptions :column="1" size="small">
              <a-descriptions-item label="合同主题">
                {{ contractInfo.contractTheme }}
              </a-descriptions-item>
              <a-descriptions-item label="合同金额">
                {{ contractInfo.amount }}
              </a-descriptions-item>
              <a-descriptions-item label="开始日期">
                {{ contractInfo.startDate }}
              </a-descriptions-item>
              <a-descriptions-item label="结束日期">
                {{ contractInfo.endDate }}
              </a-descriptions-item>
            </a-descriptions>
          </div>
        </a-form-item>
      </a-form>
    </div>
  </JModal>
</template>

<script lang="ts" setup>
  import { ref, reactive, defineExpose, defineEmits } from 'vue';

  import JModal from '/@/components/Modal/src/JModal/JModal.vue';

  const emit = defineEmits(['success', 'cancel']);


  const visible = ref<boolean>(false);
  const confirmLoading = ref<boolean>(false);
  const title = ref<string>('创建项目');

  // 合同信息
  const contractInfo = reactive({
    id: '',
    contractTheme: '',
    contractCategory: '',
    amount: '',
    startDate: '',
    endDate: '',
  });

  // 项目表单
  const projectForm = reactive({
    projectName: '',
    projectDesc: '',
  });

  /**
   * 打开项目创建模态框
   */
  function open(record: any) {
    visible.value = true;
    // 复制合同信息
    Object.assign(contractInfo, record);
    // 设置默认项目名称
    projectForm.projectName = record.contractTheme || '';
    projectForm.projectDesc = `基于合同"${record.contractTheme}"创建的项目`;
  }

  /**
   * 确定按钮点击事件
   */
  async function handleOk() {
    if (!projectForm.projectName.trim()) {
      return;
    }

    try {
      confirmLoading.value = true;

      const projectData = {
        projectName: projectForm.projectName.trim(),
        projectDesc: projectForm.projectDesc.trim(),
        contractId: contractInfo.id,
        contractTheme: contractInfo.contractTheme,
        amount: contractInfo.amount,
        startDate: contractInfo.startDate,
        endDate: contractInfo.endDate,
        status: '1', // 项目状态：1-进行中
        createTime: new Date().toISOString(),
      };

      // 这里应该调用项目创建的API
      // 由于还没有项目模块的API，我们先模拟一下
      console.log('创建项目数据：', projectData);

      // TODO: 调用项目创建API
      // const res = await createProject(projectData);
      // if (!res.success) {
      //   throw new Error(res.message || '项目创建失败');
      // }

      // 模拟API调用延迟
      await new Promise((resolve) => setTimeout(resolve, 1000));

      handleCancel();
      emit('success');
    } catch (error) {
      console.error('项目创建失败：', error);
    } finally {
      confirmLoading.value = false;
    }
  }

  /**
   * 取消按钮回调事件
   */
  function handleCancel() {
    visible.value = false;
    // 重置表单
    projectForm.projectName = '';
    projectForm.projectDesc = '';
    emit('cancel');
  }

  defineExpose({
    open,
    visible,
  });
</script>

<style lang="less" scoped>
  .project-create-content {
    padding: 0 20px;

    .contract-info-display {
      padding: 12px;
      background: #f8f9fa;
      border-radius: 6px;
      border: 1px solid #e9ecef;

      :deep(.ant-descriptions-item-label) {
        font-weight: 500;
        color: #666;
        width: 80px;
      }

      :deep(.ant-descriptions-item-content) {
        color: #333;
      }
    }
  }
</style>
